<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../vue.global.js'></script>
</head>

<body>
    <div id="app">
        {{age}} <button @click="age++">add</button>
        <hr>
        <ul>
            <li v-for="name in author.books">{{name}}</li>
        </ul>
        <hr>

        <!-- <input type="text" v-modle="title"> -->
        <button @click="addBook">加书</button>


        <h3>书有几本 {{ booksCount() }}</h3>
        <h2>书友几本 {{ booksCountComputed }}</h2>
    </div>

    <script>
        Vue.createApp({
            data() {
                return {
                    age: 0,
                    author: {
                        name: 'John Doe',
                        title: "",
                        books: [
                            'Vue 2 - Advanced Guide',
                            'Vue 3 - Basic Guide',
                            'Vue 4 - The Mystery'
                        ]
                    }
                }
            },

            methods: {
                booksCount() {
                    console.log("booksCount");
                    return this.author.books.length
                },
                addBook() {
                    this.author.books.push("newBook")
                }
            },

            computed: {
                // 依赖的一手数据this.author.books没有变化时 就直接使用上一次更新的缓存
                booksCountComputed() {
                    console.log("booksCountComputed");
                    return this.author.books.length
                }
            }
            
        }).mount("#app")
    </script>
</body>

</html>